<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>编辑</title>
		<link rel="stylesheet" type="text/css" href="../../plugins/layui/css/layui.css" />
		<link href="../../kitAdmin/css/app.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" href="../../plugins/select2/dist/css/select2.min.css" />
	</head>

	<body>
		<div class='kit-table'>
			<div style='margin:10px'>
				<form class='layui-form' action='#' lay-filter='form-edit'>
					<input type='hidden' name='uniqueid' id="uniqueid" data-link='{:uniqueid}' />
					<input type='hidden' name='studentId' id="studentId" data-link='{:studentId}' />
					<div class='layui-form-item'>
						<label class='layui-form-label'>学生英文名：</label>
						<div class='layui-input-inline'>
							<input type='text' name="stuname" id="stuname" readonly="readonly"class='layui-input'>
						</div>
					</div>
					<div class='layui-form-item'>
						<label class='layui-form-label'>选择老师：</label>
						<div class="layui-input-block" style="width: 240px!important;">
							<select id='_teacherId' name='teacherId' lay-verify="required">
								<option value=""></option>
							</select>
						</div>
					</div>
					<div class='layui-form-item'>
						<label class='layui-form-label'>课程内容：</label>
						<div class="layui-input-block" style="width: 240px!important;">
							<select id='material' name='material' lay-filter="material" lay-verify="required">
								<option value=""></option>
							</select>
						</div>
					</div>
					<div class='layui-form-item'>
						<label class='layui-form-label'>课程级别：</label>
						<div class="layui-input-block" style="width: 240px!important;">
							<select id='materialLevel' name='materialLevel' lay-filter="materialLevel" lay-verify="required">
								<option value=""></option>
							</select>
						</div>
					</div>
					<div class="layui-form-item">
						<label class='layui-form-label'>购买日期：</label>
						<div class='layui-input-inline'>
							<input type='text' placeholder='' data-link='{:purchaseDate}' id='_purchaseDate' name='purchaseDate' class='layui-input'>
						</div>
					</div>

					<div class='layui-form-item'>
						<div class='layui-inline'>
							<label class='layui-form-label'>购买时长：</label>
							<input type='hidden' placeholder='' data-link='{:hoursEnrolled}' id='_hoursEnrolled' name='hoursEnrolled' class='layui-input'>

							<div class="layui-input-inline" style="width: 80px;">
								<input type="text" data-link='{:hours}' id='_hours' placeholder="小时" autocomplete="off" class="layui-input">
							</div>
							<div class="layui-form-mid">小时</div>
							<div class="layui-input-inline" style="width: 80px;">
								<input type="text" data-link='{:minutes}' id='_minutes' placeholder="分钟" autocomplete="off" class="layui-input">
							</div>
							<div class="layui-form-mid">分钟</div>
						</div>
					</div>
					<div class="layui-form-item">
						<label class='layui-form-label'>开始排课时间：</label>
						<div class='layui-input-inline'>
							<input type='text' placeholder='' id='startDate' name='startDate' class='layui-input'>
						</div>
					</div>
					<div class='layui-form-item'>
						<label class='layui-form-label'>可用时间段：</label>
						<div class="layui-input-block" style="width: 240px!important;">
							<input type="hidden" name="times" id="tms" />
							<button class="layui-btn" type="button" onclick="settimes()">选择上课时间段</button>
							<!--<select id='_sellerId' name='sellerId' lay-verify="required">
								<option value=""></option>
							</select>-->
						</div>
					</div>
				</form>
			</div>
		</div>
		<script src="../../common/js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../static/js/base.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../plugins/jsviews/jsviews.js" type="text/javascript"></script>
		<script src="../../plugins/select2/dist/js/select2.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../plugins/laydate5.0.9/laydate.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../plugins/layui/layui.js"></script>
		<script type="text/javascript">
			var uid = getQueryVariable('uid');
			var use_times = [];
			jQuery(document).ready(function() {
				bindFormData();
				init();
				laydate.render({
					elem: '#_purchaseDate',
					type: 'date' //默认，可不填
				});
				laydate.render({
					elem: '#startDate',
					type: 'date' //默认，可不填
				});
			});
			var init = function() {
				//teachers
				$.ajax({
					url:baseUrl+ '/teachers',
					type: 'get',
					async: false,
					success: function(data) {
						var htm = "";
						data = data.rows;
						for(var i = 0; i < data.length; i++) {
							htm += '<option value="' + data[i].uniqueid + '">' + data[i].name + '</option>';
						}
						$('#_teacherId').append(htm);
					},
					error: function() {
						parent.layer.alert('加载教师信息失败！');
					}
				});
				$.ajax({
					url:baseUrl+ '/lessons', //课程-教材
					type: 'get',
					async: false,
					success: function(data) {

						var htm = "";
						data = data.rows;
						for(var i = 0; i < data.length; i++) {
							htm += '<option value="' + data[i].id + '">' + data[i].nameEn + '</option>';
						}
						$('#material').append(htm);
					},
					error: function() {
						parent.layer.alert('加载课程信息失败！');
					}
				});
			}
			var callback_save = function() {
				var str = $('.layui-form').serialize() + '&times=' + JSON.stringify(use_times);
				console.log($('.layui-form').serialize());

                var hours=0;
                var minutes=0;
                if($('#_hours').val()){
                    hours=$('#_hours').val();
                }
                if($('#_minutes').val()){
                    minutes=$('#_minutes').val();
                }
                var total=parseInt(hours*60)+parseInt(minutes);
                $('#_hoursEnrolled').val(total);

                return $('.layui-form').serialize();
			}

			function bindFormData() {
				if(uid) {
					$.ajax({
						url:baseUrl+ '/purchaseCourses/view?uniqueid=' + uid,
						type: 'get',
						success: function(data) {
//							$('#sn').html(data.data.stuname);
							data=data.data;
							$('#stuname').val(data.stuname);
							data.hours=parseInt(data.hoursEnrolled/60);
							data.minutes=data.hoursEnrolled%60;
							$.link(true, ".kit-table", data);
							//							$('select').select2().change();
						},
						error: function() {
							parent.layer.alert('系统或网络错误！');
						}
					});
				}
			}
			layui.use(['form', 'laydate'], function() {
				var form = layui.form;
				//监听变化
				form.on('select(material)', function(data) {
					$.ajax({
						url:baseUrl+ '/lessonLevels?lessonId=' + data.value,
						type: 'get',
						async: false,
						success: function(data) {
							var htm = "";
							data = data.rows;
							for(var i = 0; i < data.length; i++) {
								htm += '<option value="' + data[i].levelId + '">' + data[i].text + '</option>';
							}
							$('#materialLevel').append(htm);
							form.render('select', 'materialLevel');
							form.render('select');
						},
						error: function() {
							parent.layer.alert('加载教师信息失败！');
						}
					});
				});
				//监听提交
				form.on('submit(formDemo)', function(data) {
					layer.msg(JSON.stringify(data.field));
					return false;
				});
			});
			var settimes = function() {
				var tid = $('#_teacherId').val();
				if(tid) {
					parent.layer.open({
						//				title: false,
						maxmin: true,
						type: 2,
						area: modalArea,
						content: './views/zheng_shi_ke_time.html?techerid=' + tid,
						btn: ['确定', '取消'],
						yes: function(index, layero) {
							use_times = $(layero).find("iframe")[0].contentWindow.callback_save();
							if(use_times.length > 0) {
								$('#tms').val(use_times);
								parent.layer.close(index);

							} else {
								alert('请选择上课时间');
							}
						},
						btn2: function(index, layero) {}
					});
				} else {
					alert('请选择外教！');
				}
			}
		</script>
	</body>

</html>